<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单应用</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>
    <script src="../js/jquery.validate.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            background: #aad3ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }
        form textarea{
            max-width: 100%;
        }
        .highLight{
            background: #dfffb7;
        }
        #comments{
            width:100%;
            max-height: 400px;
        }
        select{
            width: 80%;
            height: 300px;
        }
        #select button{
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>表单应用</h1>
    <hr>
    <br>
    <h3>单行文本背景变色</h3>
    <div class="row" >
            <div class="col-md-4 col-md-offset-4">
                <form action="">
                    <fieldset>
                        <legend>个人信息输入</legend>
                        <div class="form-group">
                            <label for="name">姓名：</label>
                            <input class="form-control" id="name" >
                        </div>
                        <div class="form-group">
                            <label for="pw">密码：</label>
                            <input class="form-control" id="pw" type="password">
                        </div>
                        <div class="form-group">
                            <label for="info">详细信息：</label>
                            <textarea class="form-control" id="info" type="password"></textarea>
                        </div>
                    </fieldset>
                </form>
            </div>

    </div>
    <h3>评论框高度变化和滚动条移动</h3>
    <div class="row" >
            <div class="col-md-4 col-md-offset-4">
                <form action="">
                    <fieldset>
                        <div class="form-group">
                            <label for="comments">请输入您的评论：</label>&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="glyphicon glyphicon-plus-sign"></span>
                            <span class="glyphicon glyphicon-minus-sign"></span>&nbsp;&nbsp;
                            <span class="glyphicon glyphicon-chevron-up"></span>
                            <span class="glyphicon glyphicon-chevron-down"></span>
                            <textarea rows="6" id="comments">
                                多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。
                                多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。
                                多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。多行文本框的高度变化。
                            </textarea>
                        </div>
                    </fieldset>
                </form>
            </div>
    </div>
    <h3>复选框的应用</h3>
    <div class="row" >
        <div class="col-md-4 col-md-offset-4">
            <form action="">
                <fieldset id="type1">
                    <legend>第1种类型</legend>
                    <h4><b>你会玩的乐器有：</b></h4>
                    <div class="form-group">
                        <label><input type="checkbox">钢琴</label>
                        <label><input type="checkbox">架子鼓</label>
                        <label><input type="checkbox">吉他</label>
                        <label><input type="checkbox">古筝</label>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-sm" id="checkedAll" type="button"> 全 选</button>
                        <button class="btn btn-primary btn-sm" id="checkedNo" type="button" > 全不选</button>
                        <button class="btn btn-primary btn-sm" id="checkedRev" type="button"> 反 选</button>
                        <button class="btn btn-success btn-sm" id="submit"> 提交</button>
                    </div>
                 </fieldset>
            </form>
            <br>
            <form>
                <fieldset id="type2">
                    <legend>第2种类型</legend>
                    <h4><b>你喜欢的课程有：</b><label><input type="checkbox" id="checked2">全选/全不选</label></h4>
                    <div class="form-group">
                        <label><input type="checkbox">语文</label>
                        <label><input type="checkbox">数学</label>
                        <label><input type="checkbox">物理</label>
                        <label><input type="checkbox">生物</label>
                        <label><input type="checkbox">化学</label>
                        <label><input type="checkbox">音乐</label>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-success btn-sm" id="submit2"> 提交</button>
                    </div>
                 </fieldset>
            </form>
        </div>

    </div>
    <h3>下拉框的应用</h3>
    <div class="row" id="select">
        <form action="" class="col-md-4 col-md-offset-4">
            <div class="row">
                <div class="col-md-6">
                    <label for="selectLeft">未添加项目</label>
                    <select multiple id="selectLeft">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                    </select>
                    <button class="btn btn-primary btn-sm" type="button" id="toRight">选中添加到右边 &nbsp; <span class="glyphicon glyphicon-step-forward"></span></button>
                    <button class="btn btn-primary btn-sm" type="button" id="toRightAll">全部添加到右边 &nbsp; <span class="glyphicon glyphicon-fast-forward"></span></button>
                </div>
                <div class="col-md-6">
                    <label for="selectLeft">已添加项目</label>
                    <select multiple id="selectRight">
                        <option>7</option>
                        <option>8</option>
                    </select>
                    <button class="btn btn-primary btn-sm" type="button" id="toLeft"> &nbsp; <span class="glyphicon glyphicon-step-backward"></span>选中删除到左边</button>
                    <button class="btn btn-primary btn-sm" type="button" id="toLeftAll"> &nbsp; <span class="glyphicon glyphicon-fast-backward"></span>全部删除到左边</button>
                </div>
            </div>
            <div class="help-block">提示：双击某个项目会添加到对方的框内！</div>
        </form>
        <!--</div>-->
    </div>
    <h3>表单验证</h3>
    <div class="row" id="validate">
        <div class="col-md-4 col-md-offset-4">
            <form action="">
                <fieldset>
                    <legend>个人信息验证</legend>
                    <div class="form-group has-feedback">
                        <label for="name">用户名：</label>
                        <input class="form-control" id="name2" >
                    </div>
                    <div class="form-group has-feedback">
                        <label for="pw">邮箱：</label>
                        <input class="form-control" id="email2" type="email" value="daoke_li@qq.com">
                    </div>
                    <div class="form-group has-feedback">
                        <label for="info">个人资料：</label>
                        <textarea class="form-control" id="data2" ></textarea>
                    </div>
                </fieldset>
            </form>
        </div>

    </div>
    <div style="height: 500px"></div><!---->
</div>
<script>
$(function () {


    $("form :input").focus(function () {
        $(this).addClass("highLight");
    }).blur(function () {
        $(this).removeClass("highLight");
    });

    var $comments = $("#comments");
    $(".glyphicon-plus-sign").click(function () {
        if (!$comments.is(":animated") && $comments.height() < 400)
            $comments.animate({"height": "+=50"}, 200)
    });
    $(".glyphicon-minus-sign").click(function () {
        if (!$comments.is(":animated") && $comments.height() > 80)
            $comments.animate({"height": "-=50"}, 600)
    });

    $(".glyphicon-chevron-up").click(function () {
        if (!$comments.is(":animated"))
            $comments.animate({"scrollTop": "-=50"})
    });
    $(".glyphicon-chevron-down").click(function () {
        if (!$comments.is(":animated"))
            $comments.animate({"scrollTop": "+=50"})
    });

//    复选框第1种类型
    var $type1check = $("#type1 :checkbox");
    $("#checkedAll").click(function () {
//        $type1check.attr("checked",true);//如果此处用attr,则全选按钮使用一次后就不再起作用。而改成prop可以一直有效。
        $type1check.prop("checked", true);
    });
    $("#checkedNo").click(function () {
        $type1check.prop("checked", false);
    });
    $("#checkedRev").click(function () {
        $type1check.each(function () {
//            $(this).prop("checked",!$(this).prop("checked"));
            this.checked = !this.checked;   //此处使用js原生语言比上面一行的jquery更简单
        })
    });
    $("#submit").click(function () {
        var txt = "您选中的是：";
        $("#type1 :checkbox:checked").each(function () {
            txt += $(this).parent().text() + ","
        });
        alert(txt);
    });
//    复选框第2种类型
    var $type1check = $("#type1 :checkbox");
    /*    $("#submit").click(function(){
     var txt = "您选中的是：";
     $("#type1 :checkbox:checked").each(function(){
     txt += $(this).parent().text()+","
     });
     alert(txt);
     });*/

    var $type2check = $("#type2 :checkbox:not(#checked2)");
    var $checked2 = $("#checked2");
    $checked2.click(function () {//全选/全不选 决定选项的状态
        $type2check.prop("checked", $checked2.prop("checked"));
    });
    $type2check.click(function () {//选项决定 全选/全不选 的状态
//        alert($type2check.length)
        if ($type2check.filter(":checked").length == 6) {
            $checked2[0].indeterminate = false;
            $checked2.prop("checked", true);
        }
        else if ($type2check.filter(":checked").length == 0) {
            $checked2[0].indeterminate = false;
            $checked2.prop("checked", false);
        }
        else {
            $checked2[0].indeterminate = true;
        }
    })

    $("#toRight").click(function () {
        $("#selectLeft option:selected").appendTo($("#selectRight"));
    })
    $("#toRightAll").click(function () {
        $("#selectLeft option").appendTo($("#selectRight"));
    })
    $("#toLeft").click(function () {
        $("#selectRight option:selected").appendTo($("#selectLeft"));
    })
    $("#toLeftAll").click(function () {
        $("#selectRight option").appendTo($("#selectLeft"));
    })
    $("#selectLeft").bind("dblclick", function () {//  此处选择的是整个下拉框，而不是里面的选项
        $("option:selected").appendTo($("#selectRight"));
    })
    $("#selectRight").dblclick(function () {
        $("option:selected").appendTo($("#selectLeft"));
    })

//    表单验证
    var validationOk = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
    var validationWarning = '<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>';
    var validationError = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';

    $("#validate :input").blur(function () {
        if ($(this).is("#name2")) {
            $(this).nextAll().remove();
            if (this.value == "") {
                $(this).after(validationWarning).after('<span class="help-block">用户名不能为空！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-warning");
            } else if ((this.value.length < 6)) {
                $(this).after(validationError).after('<span class="help-block">用户名不能少于6位！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-error");
            } else {
                $(this).after(validationOk).after('<span class="help-block">用户名输入成功！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-success");
            }
        } else if ($(this).is("#email2")) {
            $(this).nextAll().remove();
            if (this.value == "") {
                $(this).after(validationWarning).after('<span class="help-block">邮箱不能为空！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-warning");
            } else if ((!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(this.value) )) {
                $(this).after(validationError).after('<span class="help-block">邮箱格式不正确！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-error");
            } else {
                $(this).after(validationOk).after('<span class="help-block">邮箱输入成功！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-success");
            }
        } else {
            $(this).nextAll().remove();
            if (this.value == "") {
                $(this).after(validationWarning).after('<span class="help-block">个人资料不能为空！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-warning");
            } else if ((this.value.length < 10)) {
                $(this).after(validationError).after('<span class="help-block">个人资料不能少于10个字！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-error");
            } else {
                $(this).after(validationOk).after('<span class="help-block">个人资料输入成功！</span>')
                        .parent().removeClass("has-success has-error has-warning").addClass("has-success");
            }
        }

    }).keyup(function(){//键盘按键抬起时触发
        //alert(322)
        $(this).triggerHandler("blur");//triggerHandler可以只触发对应事件的函数而不会执行事件本身。
    }).focus(function(){//得到时触发

        $(this).triggerHandler("blur");
    });

})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>